/* enum */
import { BaseSelectUserComponentNameEnum, SelectUserComponentRole } from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { useBaseSelectUserOptions, useSelectUserChecked, useSelectUserCheckedItemList, useSelectUserIsShowCheckbox } from '@src/component/common/BaseSelectUser/hooks'
import { useBaseSelectUserStoreIsFilterVisible } from '@src/component/common/BaseSelectUser/store'
/* scss */
import '@src/component/common/BaseSelectUser/components/Role/item.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import Vue, { CreateElement } from 'vue'
/* util */
import { isFalse } from '@src/util/type'
import { isDisabledSelectItem } from '@src/component/common/BaseSelectUser/util'

export type RoleItemProps = {
  isMulti: boolean;
  value: SelectUserComponentRole;
}

export interface RoleItemSetupState {
  
}

export enum RoleItemEmitEventNameEnum {
  Input = 'input',
  Click = 'click',
}

export type RoleItemInstance = ComponentInstance & RoleItemSetupState
export type RoleItemVM = ComponentRenderProxy<RoleItemProps> & CommonComponentInstance & RoleItemInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserRoleItem,
  emits: [
    RoleItemEmitEventNameEnum.Input,
    RoleItemEmitEventNameEnum.Click
  ],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    /* 角色 */
    value: {
      type: Object as PropType<SelectUserComponentRole>,
      default: () => ({}),
      require: true
    }
  },
  setup(props: RoleItemProps, { emit }) {
    
    const { addCheckedItem, removeCheckedItem } = useSelectUserCheckedItemList()
    const { isChecked, isDisabled, selectLimitMessage } = useSelectUserChecked(props)
    const { isShowRoleCheckbox } = useSelectUserIsShowCheckbox()
    const { isShowUser } = useBaseSelectUserOptions()
    
    const { isFilterVisible } = useBaseSelectUserStoreIsFilterVisible()
    
    // 当前角色下 人员数量
    const userCount = computed(() => {
      return props.value.userCount || 0
    })
    
    /** 
     * @description 是否显示用户数量
     * 1. 当前角色下人员数量大于0
     */
    const isShowUserCount = computed(() => {
      return Number(userCount.value) > 0
    })
    
    /** 
     * @description 是否显示 下级 按钮
     * 1. 显示人员
    */
    const isShowLowerButton = computed(() => {
      return isShowUser.value
    })
    
    // 单选状态下点击事件，展开下级角色人员
    const onSingleChoseClickHandler = () => {
      emit(RoleItemEmitEventNameEnum.Click, props.value)
    }
    
    const onLowerButtonClickHandler = (event: Event) => {
      event.stopPropagation()
      onSingleChoseClickHandler()
    }
    
    const onMultiChoseClickHandler = () => {
      
      if (isFalse(isShowRoleCheckbox.value)) {
        onSingleChoseClickHandler()
        return
      }
      
      if (isDisabled.value) {
        selectLimitMessage()
        return
      }
      
      if (isChecked.value) {
        removeCheckedItem(props.value)
      } else {
        addCheckedItem(props.value)
      }
      
    }
    
    const onClickHandler = () => {
      onSingleChoseClickHandler()
    }
    
    
    const onCheckboxInputHandler = () => {
      
      if (isFilterVisible.value) {
        return
      }
      
      if (isDisabled.value) {
        selectLimitMessage()
        return
      }
      
      if (isChecked.value) {
        removeCheckedItem(props.value)
        return
      }
      
      addCheckedItem(props.value)
    }
    
    const onCheckboxClickHandler = (event: Event) => {
      event.stopPropagation()
    }
    
    return {
      isShowLowerButton,
      isChecked,
      isDisabled,
      userCount,
      isShowUserCount,
      isShowRoleCheckbox,
      onClickHandler,
      onLowerButtonClickHandler,
      onCheckboxInputHandler,
      onCheckboxClickHandler
    }
    
  },
  render(h: CreateElement) {
    
    const classNames = [
      BaseSelectUserComponentNameEnum.BaseSelectUserRoleItem,
      isDisabledSelectItem(this.value) && this.isShowRoleCheckbox ? 'base-select-user-item-no-checkbox' : '',
    ]
    
    return (
      <div class="base-select-user-role-item-wrapper">
        
        <div 
          class={classNames}
          onClick={this.onClickHandler}
        >
          
          {/* start 角色多选 */}
          {this.isShowRoleCheckbox && (
            <div class="base-select-user-role-item__checkbox">
              <el-checkbox
                value={this.isChecked}
                onInput={this.onCheckboxInputHandler}
                nativeOnClick={this.onCheckboxClickHandler}
              >
              </el-checkbox>
            </div>
          )}
          {/* end 角色多选 */}
          
          {/* start 角色名称 */}
          <div class="base-select-user-role-item__name">
            { this.value.name }
          </div>
          {/* end 角色名称 */}
          
          {/* start 角色人员数量 */}
          {(
            <div class="base-select-user-role-item__count">
              ({ this.userCount })
            </div>
          )}
          {/* end 角色人员数量 */}
          
        </div>
        
      </div>
    )
  }
})
